<template>
  <view class="container">
    <view class="title-box">
      <view class="title-icon"></view>
      <view class="title">服务信息</view>
    </view>
    <view class="info-box">
      <view class="name">{{ info.service_name }}</view>
      <view class="price">超值价：
        <text>{{ info.pay_price }}元/次</text>
      </view>
    </view>

    <view class="title-box">
      <view class="title-icon"></view>
      <view class="title">订单信息</view>
    </view>
    <view class="info-box">
      <view class="row">
        <view class="sn">订单号：{{ info.order_sn }}</view>
        <view class="status">{{ info.status_desc }}</view>
      </view>
      <view class="time" v-if="info.pay_time">下单时间：{{ info.pay_time }}</view>
    </view>

    <view class="title-box">
      <view class="title-icon"></view>
      <view class="title">用户信息</view>
    </view>
    <view class="info-box">
      <view class="user">
        <image class="avatar" :src="info.user_info.avatar ? info.user_info.avatar_path : '/static/images/default_avatar.png'" mode="aspectFill"></image>
        <view class="other">
          <view class="username">姓名：{{ info.user_info.nickname }}</view>
          <view class="mobile">联系方式：{{ info.user_info.mobile }}</view>
        </view>
      </view>
    </view>

    <block v-if="info.staff_info.id > 0">
      <view class="title-box">
        <view class="title-icon"></view>
        <view class="title">陪诊员信息</view>
      </view>
      <view class="info-box">
        <view class="user">
          <image class="avatar" :src="info.staff_info.avatar ? info.staff_info.avatar_path : '/static/images/default_avatar.png'" mode="aspectFill"></image>
          <view class="other">
            <view class="username">姓名：{{ info.staff_info.nickname }}</view>
            <view class="mobile">联系方式：{{ info.staff_info.mobile }}</view>
          </view>
        </view>
      </view>
    </block>

    <button class="contact-btn" plain open-type="contact" hover-class="none">联系客服</button>

    <view class="btn-box" v-if="info.status == 0">
      <view class="btn cancel" @click="cancel(info.id, index)">取消</view>
      <view class="btn pay" @click="pay(info.id, index)">确认支付</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      index: 0
    };
  },

  onLoad: function (options) {
    var id = options.id;

    this.index = options.index ? options.index : 0;

    this.$http.post('/index/Api/orderDetail', {id}).then(res => {
      if (res.data.result == 1) {
        this.info = res.data.data;
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000)
          }
        })
      }
    })
  },

  methods: {
    cancel: function (id, index) {
      uni.showModal({
        title: '提示',
        content: '确定要取消订单吗？',
        success: res => {
          if (res.confirm) {
            this.$http.post('/index/Api/cancelOrder', {id}).then(res => {
              if (res.data.result === 1) {
                this.info.status = 4;
                this.info.status_desc = '已取消';

                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2]; //上一个页面
                if (prevPage.$vm.status == -1) {
                  prevPage.$vm.list[index].status = 4;
                  prevPage.$vm.list[index].status_desc = '已取消';
                } else {
                  prevPage.$vm.list.splice(index, 1);
                }
              }
            })
          }
        }
      })
    },

    pay: function (id) {
      var timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        uni.showLoading({
          title: '支付中...',
          mask: true
        })

        this.$http.post('/index/Api/pay', {id}).then(res => {
          uni.removeStorageSync('timestamp');
          if (res.data.result == 1) {
            var {order_sn, pay_data} = res.data.data;
            /********主要代码********/
            if (pay_data) {
              uni.getProvider({
                service: 'payment',
                success: result => {
                  var provider = result.provider;
                  if (provider) {
                    uni.requestPayment({
                      provider: provider,
                      orderInfo: {order_sn},
                      timeStamp: pay_data.timeStamp,
                      nonceStr: pay_data.nonceStr,
                      package: pay_data.package,
                      signType: pay_data.signType,
                      paySign: pay_data.paySign,
                      success: res => {
                        uni.hideLoading();

                        if (res.data.result === 1) {
                          this.info.status = 3;
                          this.info.status_desc = '审核中';

                          var pages = getCurrentPages();
                          var prevPage = pages[pages.length - 2]; //上一个页面
                          if (prevPage.$vm.status == -1) {
                            prevPage.$vm.list[index].status = 3;
                            prevPage.$vm.list[index].status_desc = '审核中';
                          } else {
                            prevPage.$vm.list.splice(index, 1);
                          }
                        }
                      },
                      fail: function (res) {
                        uni.showToast({
                          title: '取消支付',
                          icon: 'none'
                        })
                      }
                    })
                  } else {
                    uni.showToast({
                      title: '取消支付',
                      icon: 'none'
                    })
                  }
                }
              });
            }
            /********主要代码********/
          } else {
            uni.hideLoading();
            this.$common.doErrorResult(res);
          }
        })
      }
    }
  },
}
</script>

<style lang="scss">
.container {
  padding: 0 20rpx;

  .title-box {
    display: flex;
    align-items: center;
    margin: 40rpx 0 40rpx 20rpx;

    .title-icon {
      width: 20rpx;
      height: 50rpx;
      margin-right: 20rpx;
      background: linear-gradient(to right, #0984CA, #FFFFFF);
    }

    .title {
      font-size: 32rpx;
      color: $main-color;
    }
  }

  .info-box {
    width: calc(100% - 80rpx);
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;

    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: $main-color;
      margin-bottom: 40rpx;
    }

    .price {
      text {
        color: #F18958;
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .time {
      margin-top: 40rpx;
      color: $main-blank;
    }

    .user {
      display: flex;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 40rpx;
      }

      .other {
        display: flex;
        height: 120rpx;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }

  .contact-btn {
    width: 360rpx;
    padding: 0;
    font-size: 32rpx;
    color: $main-color;
    border: 2rpx solid $main-color;
    border-radius: 40rpx;
    margin-top: 40rpx;
    background: #fff;
  }

  .btn-box{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 30rpx 20rpx;
    background: #fff;

    .btn{
      padding: 20rpx 40rpx;
      background: #ccc;
      color: #fff;
      border-radius: 50rpx;
      margin-left: 20rpx;
      width: 30%;
      text-align: center;
    }

    .pay {
      flex: 1;
      background: #4cd964;
    }
  }
}
</style>

